<!--我的收藏-->
<template>
  <div class="container user">
    <UserSidebar />
    <div class="user-frame">
      <div class="user-panel">
        <div class="page-title" style="padding: 0">
          <p>Favorite Product</p>
        </div>
        <ProduList
          collection
          @clickCollection="clickCollection"
          :productList="collectionList"
          :total="total"
          :pageSize="form.page_size"
          :page="form.page"
          :loading="loading"
          @pageChange="pageChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import ProduList from "@/components/subject/ProduList.vue";
export default {
  components: {
    ProduList,
  },
  data() {
    return {
      loading: true,
      collectionList: [],
      form: {
        page: 1,
        page_size: 20,
      },
      total: 0,
    };
  },
  activated() {
    this.getCollectionList();
  },
  methods: {
    //取消收藏
    async clickCollection(item, index) {
      console.log(index);
      this.tips.startLoadingToast();
      let res = await this.$store.dispatch("menu/proCollection", {
        id: item.id,
      });
      this.tips.closeToast();
      if(res.code==0){
        this.collectionList.splice(index,1);
      }
    },
    //切换页码
    pageChange(page) {
      this.collectionList = [];
      this.form.page = page;
      this.getCollectionList();
    },
    async getCollectionList() {
      this.loading = true;
      this.collectionList = [];
      let res = await this.$store.dispatch("user/collectionList", this.form);
      this.loading = false;
      let proList = [];
      if (res.code == 0 && res.data != undefined) {
        for (let i = 0; i < res.data.list.length; i++) {
          let pro = {
            id: res.data.list[i].product.id,
            pic: res.data.list[i].product.pic,
            title: res.data.list[i].product.title,
            stars: parseInt(res.data.list[i].product.stars),
          };
          proList.push(pro);
        }
        console.log(proList);
        this.collectionList = this.collectionList.concat(proList);
        this.total = res.data.paginatio.total;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.user {
  padding: 0 !important;
}
@import "user.less";
</style>